<template>
   <div>
	   <!--面包屑区域-->
	   <el-breadcrumb separator-class="el-icon-arrow-right">
	     <el-breadcrumb-item :to="{ path: '/adminHome/center' }">首页</el-breadcrumb-item>
	     <el-breadcrumb-item>会员管理</el-breadcrumb-item>
	     <el-breadcrumb-item>会员订单</el-breadcrumb-item>
	   </el-breadcrumb>
	   <!--卡片视图-->
	   <el-card >
		   <el-row :gutter="20">
			    <el-col :span="6"> 
			   	<el-input placeholder="输入会员ID搜索会员订单" v-model="searchQuery">
			   	<el-button slot="append" icon="el-icon-search" @click="MembersOrdersSearchById() "></el-button>
			   	</el-input>
			   </el-col>	
			<!-- <el-col :span="4">
				<el-button type="primary" @click="MembersOrdersSearchById">搜索会员订单</el-button>
			</el-col> -->
			</el-row>
	   </el-card>
	   <!--表格-->
	     <el-table
	       :data="tableData"
	       style="width: 100%"
	       max-height="100">
	       <el-table-column
	         fixed
	         prop="orderID"
	         label="订单编号"
	         width="140">
	       </el-table-column>
	       <el-table-column
	         prop="memberID"
	         label="会员编号"
	         width="150">
	       </el-table-column>
	       <el-table-column
	         prop="productID"
	         label="商品编号"
	         width="190">
	       </el-table-column>
	       <el-table-column
	         prop="quantity"
	         label="数量"
	         width="190">
	       </el-table-column>
		   <el-table-column
		     prop="totalAmount"
		     label="总计"
		     width="240">
		   </el-table-column>
		   <el-table-column
		     prop="orderDate"
		     label="日期"
		     width="220">
		   </el-table-column>
	       <el-table-column
	         fixed="right"
	         label="操作"
	         width="100">
	         <template slot-scope="scope">
	           <el-button
	             @click.native.prevent="deleteRow(scope.$index, tableData)"
	             type="text"
	             size="small">
	             移除
	           </el-button>
	         </template>
	       </el-table-column>
	     </el-table>
	   <!--文本框-->
	   
   </div>
   
</template>
<script>
	export default{
		methods: {
			
			MembersOrdersSearchById() {
				
				let params = {
				    memberID: this.searchQuery 
				};  
				
			      this.axios.get('MembersOrdersSearchById', {params:params})
			     .then(
			     	response=>{
			     		this.tableData=response.data.data;
			     		console.log(this.tableData)
			     		if (response.data.code === 200) {
			     			this.$message({
			     			  message: response.data.message,  
			     			  type: 'success'  
			     			});  
			     			
			     		}else{
			     			this.$message({
			     			  message: response.data.message,  	
			     			  type: 'warning' 
			     			  });  
			     		}
			     	}
			     )
			     .catch(error => {
			             console.error(error);  
			             this.$message({  
			             message: error.response.data.message,  
			             type: 'error'  
			             });  
			         });  
			},
			
		      deleteRow(index, rows) {
		        rows.splice(index, 1);
				},
		    },
		data(){
			return {
				
				searchQuery:'',
				
			        goods: 5,
					labelPosition: 'right',
			        form:{
						name: '',  
						category: '', 
						phone: '',  
						Date: '',
						sum:'',
						number:''
			        },
					rules:{  
					        // ... 其他验证规则 ...  
					        phone: [  
					          { required: true, message: '请输入手机号', trigger: 'blur' },  
					          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }  
					        ],  
					},  
					tableData:[]
			      };
		},
			
	}
</script>

<style lang ="less" scoped>


</style>